
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>微信支付 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>微信支付 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">配置</div>
          <div class="card-question">在使用微信支付Java SDK时，需要配置哪些核心的开发者信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要配置三个核心信息：应用ID (AppID)、商户ID (MchID) 和 API密钥 (Key)。这些信息在 `WXPayConfig` 的实现类中通过重写 `getAppID()`, `getMchID()`, 和 `getKey()` 方法来设置。</div>
          </div>
          <div class="card-source">来源: 配置开发者信息</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">API</div>
          <div class="card-question">微信支付Java SDK中的`com.github.wxpay.sdk.WXPay`类提供了哪些主要的支付相关操作方法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">API</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该类提供了多种操作方法，主要包括：统一下单 (unifiedOrder)、查询订单 (orderQuery)、关闭订单 (closeOrder)、申请退款 (refund)、查询退款 (refundQuery) 和下载对账单 (downloadBill) 等。</div>
          </div>
          <div class="card-source">来源: 微信支付 Java SDK</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">微信支付Java SDK在内部如何处理API方法的请求参数？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SDK方法内部会自动将传入的Map<String, String>参数转换为一个包含appid、mch_id、nonce_str、sign_type和sign的XML格式数据，然后通过HTTPS发送请求。</div>
          </div>
          <div class="card-source">来源: 微信支付 Java SDK</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安全</div>
          <div class="card-question">文档中提到了哪些关于微信支付证书文件的安全建议？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安全</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提出了三点建议：1. 证书文件不应放在web服务器虚拟目录中，以防被下载；2. 建议将证书文件名改为复杂且不易猜测的名称；3. 商户服务器要做好病毒和木马防护，防止证书被窃取。</div>
          </div>
          <div class="card-source">来源: 微信支付 Java SDK</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当收到微信支付结果的异步通知时，首要的验证步骤是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">首要步骤是验证签名的正确性。可以使用`WXPay`实例的`isPayResultNotifySignatureValid(notifyMap)`方法进行验证。如果签名错误，或者数据中没有sign字段，都应视为验证失败。</div>
          </div>
          <div class="card-source">来源: 收到支付结果通知时，需要验证签名</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是ZXing库？它的主要功能是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">ZXing是一个开源的、用Java实现的多种格式的1D/2D条码图像处理库。它的主要功能包括通过摄像头扫描条码、从相册读取条码图片、生成条码图片以及长按识别图片中的条码。</div>
          </div>
          <div class="card-source">来源: zxing</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">API</div>
          <div class="card-question">在使用ZXing生成二维码时，可以通过`EncodeHintType`设置哪些参数来控制二维码的特性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">API</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档示例中展示了可以设置三个主要参数：`EncodeHintType.CHARACTER_SET`用于指定内容编码格式（如UTF-8），`EncodeHintType.ERROR_CORRECTION`用于指定纠错等级，`EncodeHintType.MARGIN`用于设置二维码边框的空白宽度。</div>
          </div>
          <div class="card-source">来源: zxing</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">GoEasy服务采用了什么消息模式来实现通信？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">GoEasy采用“发布/订阅”(Publish/Subscribe)的消息模式，这种模式可以轻松实现一对一和一对多的通信。</div>
          </div>
          <div class="card-source">来源: GoEasy API</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">API</div>
          <div class="card-question">如何在客户端（浏览器）使用GoEasy接收来自特定频道的消息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">API</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">首先需要引入goeasy.js脚本，然后实例化一个GoEasy对象并提供appkey。接着调用`goEasy.subscribe`方法，传入要监听的`channel`和一个`onMessage`回调函数，该函数会在接收到消息时被触发。</div>
          </div>
          <div class="card-source">来源: 客户端接收消息</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
